// 该文件为 webpack 配置打包用的文件
// AMD: 先加载，后使用(预先加载)
// CMD: 什么时候用什么时候加载(懒加载)


// 用来获取设置路径的方法
const path = require('path');

// 导入 html插件
const HtmlWebpackPlugin = require('html-webpack-plugin');

// 导入打包独立样式文件的插件
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

// 导入加载 Vue 插件
const VueLoader = require('vue-loader/lib/plugin')

// __dirname 是当前文件夹的绝对路径
// console.log(11111, __dirname);

module.exports = {
    /*
        配置环境
        开发环境 'development'
        生产环境 | 测试环境  'production'
    */
    mode: 'development',
    // 入口配置
    // entry: './src/main.js',
    entry: {
        app: './src/main.js',
    },
    // 出口配置
    output: {
        // path 设置打包之后文件放在 dist 目录下
        path: path.resolve(__dirname, 'dist'),
        // 打包之后的文件名字
        filename: 'js/[name].[contenthash:8].bundle.js',
        // 在生成文件之前清空 output 目录
        clean: true,
    },
    // 插件配置
    plugins: [
        // 将 template 对应的文件打包到目录中
        new HtmlWebpackPlugin({
            // 设置 html 模板位置
            template: './public/index.html'
        }),
        new MiniCssExtractPlugin({
            // 配置独立样式文件打包后的文件名称
            filename: 'css/[name].[contenthash:8].css'
        }),
        // 配置 Vue 插件
        new VueLoader()
    ],
    // 加载器的配置
    module: {
        rules: [
            {
                // 匹配哪些文件需要使用加载器
                test: /\.css$/,
                // 配置被匹配到的文件使用对应的加载器
                use: [MiniCssExtractPlugin.loader, 'css-loader']
            }, {
                test: /\.scss$/,
                use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader']
            }, {
                test: /\.less$/,
                use: [MiniCssExtractPlugin.loader, 'css-loader', 'less-loader']
            }, {
                test: /\.vue$/,
                use: ['vue-loader']
            }, {
                test: /\.(png|jpg|jpeg|svg|weeb|git)$/i,
                type: 'asset/resource'
            }, {
                test: /\.(js|jsx)$/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: [
                            // js 的新语法
                            '@babel/preset-env',
                            // react 的语法
                            '@babel/preset-react'
                        ]
                    }
                }
            }
        ]
    },
    // 解析器
    resolve: {
        // 配置忽略后缀名
        extensions: ['.js', '.json', '.ts', '.vue', '.jsx', '.tsx'],
        // 配置路径别名
        alias: {
            '@': path.resolve(__dirname, 'src'),
            'aa': path.resolve(__dirname, 'src'),
        },
    },
    // 服务配置
    devServer: {
        port: 3000,
        open: true,
        proxy: {
            // 配置服务器代理，解决跨域问题
            '/api': {
                target: 'http://open.douyucdn.cn',
                changeOrigin: true
            }
        }
    },
}